<!--
 * Copyright © 2023
 * @Author: zhangxiang
 * @Date: 2023-09-23 14:09:33
 * @LastEditors: zhangxiang
 * @LastEditTime: 2023-09-23 14:54:32
 * @Description:
 *
-->

<template>
  <div class="warning-and-alarm-ctn">
    <el-carousel
      :height="'200px'"
      :autoplay="true"
      :interval="5000"
      arrow="never"
    >
      <el-carousel-item>
        <AlarmStat />
      </el-carousel-item>
      <el-carousel-item>
        <WarningEvent />
      </el-carousel-item>
    </el-carousel>
  </div>
</template>

<script>
import AlarmStat from './AlarmStat.vue'
import WarningEvent from './WarningEvent.vue'

export default {
  name: 'WarningAndAlarm',
  components: {
    AlarmStat,
    WarningEvent
  },
  props: {},
  data() {
    return {}
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {},
  methods: {}
}
</script>

<style lang="less" scoped>
@import "@/assets/css/common.less";
.warning-and-alarm-ctn {
  width: 810px;
  /deep/ .el-carousel__indicators--horizontal {
    right: 5px;
    top: 8px;
    bottom: unset;
    left: unset;
    line-height: 0;
    .el-carousel__indicator--horizontal {
      padding-top: 4px;
      padding-bottom: 4px;
    }
  }
  /deep/ .el-carousel__button {
    width: 6px;
    height: 6px;
    background: #619abf;
    border-radius: 50%;
  }
  /deep/ .el-carousel__indicator.is-active button {
    background: #03d3ff;
  }
}
</style>
